import React, {useEffect, useState} from 'react'
import CommentView from '../CommentView'
import api from '../../../api'
import './style.less'
import LoadMore from '../../../components/LoadMore'

const Comment = (props) => {

  const [comment,setComment] = useState([])
  const [hasMore,setHasMore] = useState(false)

  useEffect(() => {
    http()
  },[])

  function loadMoreHandle() {
    // 加载更多
    http()
  }

  function http() {
    api.comment({id:props.id}).then(res => {
      if(res.data.status === 200) {
        setComment([...comment,...res.data.result.data])
        setHasMore(res.data.result.hasMore)
      }
    }).catch(err => {
      console.log(err);
    })
  }

  return (
    <div>
      {
        comment.length > 0 ? <CommentView data={comment} /> : <div className='load'>等待数据加载</div>
      }
      {
        hasMore ? <LoadMore onLoadMore={loadMoreHandle}/> : <div className='load'>没有数据了</div>
      }
    </div>
  )
}

export default Comment